<template>
  <div class="myaddress-container">
    <!-- 顶部导航 -->
    <van-nav-bar left-text="我的地址" left-arrow @click-left="this.$router.go(-1)" />

    <!-- 选择地址 -->
    <div class="address-content" v-if="flag">
      <div class="card">
        <div class="card-left" @click="sendAddress(item,true)">
          <div class="body">
            <p>
              {{ curPosition }}
            </p>
          </div>
        </div>
        <div class="card-right">
          <van-icon name="location-o" class="edit" @click="getPosition"  />
        </div>
      </div>
      <div
        class="card"
        v-for="(item, index) in addressList"
        :key="item.id"
        @click="sendAddress(item)"
      >
        <div class="card-left">
          <div class="head">
            <p class="tag">{{ item.label === 1 ? '家' : item.label === 2 ? '公司' : '学校' }}</p>
            <p class="username">{{ userInfo.username }}</p>
            <p class="phone">{{ userInfo.phone }}</p>
          </div>
          <div class="body">
            <p>
              {{ item.province + item.detailArea }}
            </p>
          </div>
        </div>
        <div class="card-right">
          <van-icon name="edit" class="edit" @click="editAddress(index)" />
        </div>
      </div>
    </div>

    <!--显示 地址列表 -->
    <div class="address-content" v-else>
      <div class="card">
        <div class="card-left">
          <div class="body">
            <p>
              {{ curPosition }}
            </p>
          </div>
        </div>
        <div class="card-right">
          <van-icon name="location-o" class="edit" @click="getPosition" />
        </div>
      </div>
      <div class="card" v-for="item in addressList" :key="item.id">
        <div class="card-left">
          <div class="head">
            <p class="tag">{{ item.label === 1 ? '家' : item.label === 2 ? '公司' : '学校' }}</p>
            <p class="username">{{ userInfo.username }}</p>
            <p class="phone">{{ userInfo.phone }}</p>
          </div>
          <div class="body">
            <p>
              {{ item.province + item.detailArea }}
            </p>
          </div>
        </div>
        <div class="card-right">
          <van-icon name="edit" class="edit" @click="editAddress(item.id)" />
        </div>
      </div>
    </div>

    <!-- 添加地址 -->
    <div class="add-address">
      <van-button type="primary" @click="addAddress">添加地址</van-button>
    </div>
  </div>
</template>

<script>
import { getAddress } from '../../api/address.js'
import { getCurPosition } from '../../api/positionAll'
export default {
  data() {
    return {
      // 地址列表
      addressList: [],
      // 选中的地址
      chosenAddressId: 1,
      // 判断是否从 上门回收 过来
      flag: false,
      userInfo: {},
      curPosition: '当前定位'
    }
  },
  created() {
    this.getAddressList()
  },
  // 进入之前
  beforeRouteEnter(to, from, next) {
    if (from.path === '/recover') {
      next((vm) => {
        // vm相当于上面的this
        vm.flag = true
        next()
      })
    } else {
      next()
    }
  },
  methods: {
    // 获取当前地址
    getPosition() {
      getCurPosition().then((city) => {
        this.curPosition = city
      })
    },
    // 查询个人的地址列表
    async getAddressList() {
      const { data: res } = await getAddress()
      if (res.code === 1) {
        this.addressList = res.data
      }
      this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
    },
    // 新增地址
    async addAddress() {
      this.$router.push('/address/add')
    },
    // 编辑地址
    editAddress(id) {
      this.$router.push(`/address/${id}`)
    },
    // 如果是上门回收，则返回地址
    sendAddress(item, flag) {
      let address = ''
      if (flag) {
       address = this.curPosition
      } else {
        address = item.province + item.detailArea
      }
      this.$router.push({ name: 'recover', params: { address: address } })
    }
  }
}
</script>

<style lang="less" scoped>
.myaddress-container {
  height: 100vh;

  // 地址列表
  .address-content {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;

    .card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      // height: 94px;
      margin: 10px 0;
      overflow: hidden;
      border-radius: 4px;
      background-color: #fff;

      .card-left {
        width: 85%;
        height: 100%;
        padding: 6px;

        .head {
          display: flex;
          justify-content: start;
          align-items: center;
          width: 100%;
          height: 35px;
          line-height: 5px;
          font-size: 15px;

          .tag {
            width: 38px;
            height: 20px;
            line-height: 20px;
            background-color: #b6dcf1;
            border-radius: 5px;
            font-size: 11px;
            color: #0a8bcf;
            text-align: center;
          }

          .username {
            margin: 0 5px;
          }
        }

        .body {
          border-right: 1px solid #eee;
          p {
            margin: 6px 0;
            font-size: 13px;
            // 多行文本省略号显示
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      .card-right {
        display: flex;
        justify-content: center;
        width: 15%;
        height: 100%;
        text-align: center;

        .edit {
          font-size: 24px;
        }
      }
    }
  }
  // 添加地址按钮
  .add-address {
    width: 100%;
    height: 45px;

    .van-button {
      width: 80%;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin: 30px 0;
    }
  }
}
</style>
